import React, { useEffect, useState } from 'react';
import { Descriptions, Watermark, theme } from 'antd';
import { BackwardOutlined } from '@ant-design/icons'
import moment from 'moment'
import axios from 'axios';


const NewsPreview = (props) => {
  const { token } = theme.useToken();
  const [newsInfo, setNewsInfo] = useState({})
  const auditList = ["未审核", "审核中", "已通过", "未通过"]
  const publishList = ["未发布", "待发布", "已上线", "已下线"]
  const colorList = ["black", "orange", "green", "red"]
  
  useEffect(() => {
    axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
      setNewsInfo(res.data)
    })
  }, [props.match.params.id])

  const items = [
    {
      key: '1',
      label: '创建者',
      children: newsInfo.author,
    },
    {
      key: '2',
      label: '创建时间',
      children: moment(newsInfo.createTime).format("YYYY/MM/DD"),
    },
    {
      key: '3',
      label: '发布时间',
      children: newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD") : '-',
    },
    {
      key: '4',
      label: '区域',
      children: newsInfo.region,
    },
    {
      key: '5',
      label: '审核状态',
      contentStyle: { color: colorList[newsInfo.auditState] },
      children: auditList[newsInfo.auditState],
    },
    {
      key: '6',
      label: '发布状态',
      contentStyle: { color: colorList[newsInfo.publishState] },
      children: publishList[newsInfo.publishState],
    },
    {
      key: '7',
      label: '访问数量',
      children: newsInfo.view,
    },
    {
      key: '8',
      label: '点赞数量',
      children: newsInfo.star,
    },
    {
      key: '9',
      label: '评论数量',
      children: 0,
    },
  ];

  const contentStyle = {
    // lineHeight: '260px',
    textAlign: 'left',
    color: token.colorTextTertiary,
    backgroundColor: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: `1px dashed ${token.colorBorder}`,
    marginTop: 10,
    // height: 500
  };

  return <>

    {newsInfo && <>
      {/* 标题-副标题 */}
      <div>
        <BackwardOutlined style={{ fontSize: '16px', color: '#08c', height: "30px" }} onClick={() => { window.history.back() }} />
        <span style={{ paddingLeft: "5px", fontSize: "24px", fontWeight: "600" }}>{newsInfo.title}</span>
        <span style={{ paddingLeft: "10px", fontSize: "12px", color: "gray" }} >{newsInfo.category?.title}</span>
      </div>

      <Watermark content="小O爱学习">
        <Descriptions items={items} />
        <div style={contentStyle} dangerouslySetInnerHTML={{ __html: newsInfo.content }} />
      </Watermark>
    </>}
  </>;
}
export default NewsPreview;